<template>
    <div style="width: 100%;position: relative;height: 100%;">
        <div id="search">
            <el-row>
                <el-form :model="listQuery" :inline="true" ref="formQuery">
                    <el-col :span="8">
                        <el-form-item label="账号" prop="deptName">
                            <el-input size="small" v-model="listQuery.deptName" placeholder="请输入部门名称" clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button size="small" type="success" icon="el-icon-plus" @click="handleAdd"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search"></el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>

        </div>
        <div id="table">
            <el-table border :data="list" style="width: 100%" v-loading="loading">
                <el-table-column type="index" width="65" label="#序号"></el-table-column>
                <el-table-column prop="deptName" label="部门名称"></el-table-column>
                <el-table-column prop="code" label="部门编码"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="状态" class-name="status-col" width="120">
                    <template slot-scope="{row}">
                        <el-switch v-model="row.status" :active-text="row.status==0?'正常':'已失效'"
                                   active-value="0"
                                   inactive-value="1" @change="handleStatus($event,row.id)"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope" v-if="scope.row.status == 1? false:true">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-edit"
                                       @click="handleEdit(scope.row)"></el-button>

                        </el-tooltip>
                        <!--<el-tooltip class="item" effect="dark" content="用户" placement="top-start">-->
                            <!--<el-button size="small" type="text" icon="el-icon-user"-->
                                       <!--@click="handleUser"></el-button>-->

                        <!--</el-tooltip>-->
                    </template>

                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block" style="margin-top: 10px;position: absolute;right: 0;">
                <el-pagination :page-sizes="[10]" :page-size="listQuery.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="42%">
            <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="100px"
                     style="width: 400px; margin-left:50px;">
                <el-form-item label="部门名称" prop="deptName">
                    <el-input size="small" v-model="form.deptName" placeholder="请输入部门名称"/>
                </el-form-item>
                <el-form-item label="部门状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio label="0">
                            正常
                        </el-radio>
                        <el-radio label="1">
                            失效
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                    <el-input size="small" v-model="form.code" placeholder="请输入编码"
                              :disabled="dialogStatus =='update'? true:false "/>
                </el-form-item>
                <el-form-item label="部门描述">
                    <el-input size="small" v-model="form.description" :autosize="{ minRows: 4}" type="textarea"
                              placeholder="请输入部门描述"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button size="small" type="primary" @click="submit('form')">
                    确定
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "department",
        data() {
            return {
                listQuery: {
                    pageNum: 1,
                    pageSize: 10
                },
                loading: true,
                list: [],
                total: undefined,
                dialogVisible: false,
                form: {
                    id: undefined
                },
                //角色项
                roleOptions: [],
                //部门项
                deptOptions: [],
                //校验
                rules: {
                    deptName: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
                    code: [{required: true, message: '请输入部门编码', trigger: 'blur'}],
                    status: [{required: true, message: '选择状态', trigger: 'blur'}],
                    description: [{required: true, message: '请输如描述', trigger: 'blur'}],
                },
                dialogStatus: "",
                textMap: {
                    update: "编辑部门",
                    create: "新增部门"
                },
            }
        },
        methods: {
            //获取列表
            getList() {
                this.$post("/dept/list", this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.loading = false;
                        this.list = res.data.records;
                        this.total = res.data.total;
                    }

                })
            },
            //查询
            search() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            //新增
            handleAdd() {
                this.dialogStatus = "create";
                this.form = {};
                this.dialogVisible = true;
            },
            handleUser(){
                this.$router.push("/user");
            },

            //编辑
            handleEdit(row) {
                this.dialogStatus = "update";
                this.$get('/dept/getDetail', {deptId: row.id}).then(res => {
                    //console.log(res);
                    if (res.code == 200) {
                        this.form = res.data;
                    }

                })
                this.dialogVisible = true;
            },

            //初始化
            init() {
            },
            //提交
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post("/dept/save", this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success("操作成功");
                                //关闭对话框
                                this.dialogVisible = false;
                                //重新渲染数据
                                this.getList();
                            }
                            else {
                                this.$message.error(res.msg);
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //状态改变
            handleStatus(status, id) {
                this.$get("/dept/changeStatus", {deptId: id, status: status}).then(res => {
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                    } else {
                        this.$message.error("操作失败");
                    }
                })
            },

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //清空搜索条件
            resetQuery(formName) {
                this.$refs[formName].resetFields();
            },
            //分页改变
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            }
        },
        created() {
            this.init();
            this.getList();

        }
    }

</script>

<style scoped>
    #table {
        padding: 0 20px;
    }

    #search {
        padding: 20px;
    }
    .item{
        margin-left: 15px;
    }
</style>